<template>
  <a-card class="ax_plain_card" :loading="jobTable.loading">
    <ul class="table_card_list" ref="cardRef">
      <li
          v-for="(item, key) in jobTable.data"
          :key="key"
          @click="selectMonitorJob(item)"
          :class="[{ active: jobTable.keys.includes(item.jobId) }]"
          @dblclick="jobEdit(item.jobId)"
          :draggable="true"
          :data-selection="item.jobId"
          @dragstart="dragstart(item)"
          @drop="drop(item)"
          @contextmenu="displayJobMenu(item)"
          @dragover="e => e.preventDefault()"
      >
        <a-card>
          <template #cover>
            <!-- 传入图片地址就能作为封面 -->
            <CardCover></CardCover>
          </template>
          <a-card-meta>
            <template #title>
              <div class="flex items-center gap-4 cursor-move">
                <a-badge color="blue" :count="key + 1"></a-badge>
                <span class="text-[12px]">自定义标题</span>
              </div>
            </template>
            <template #description>{{ item.jobId }}</template>
          </a-card-meta>
        </a-card>
      </li>
    </ul>
    <a-empty v-if="jobTable.data.length === 0"></a-empty>
  </a-card>
</template>

<script setup lang="ts">
  import {transferredSetValues} from '@/utils/table/table';
  import {useSortable} from '@vueuse/integrations/useSortable';
  import {dragstart, drop, selectMonitorJob} from '../../data/card';
  import {displayJobMenu} from '../../data/curd';
  import {jobEdit} from '../../data/curd';
  import {jobTable} from '../../data/table';

  const cardRef = ref();

  interface SortConfig {
    oldIndex: number;
    newIndex: number;
  }

  transferredSetValues(jobTable);

  nextTick(() => {
    useSortable(cardRef, jobTable.value.data, {
      animation: 200,
      handle: '.cursor-move',
      onUpdate(e: SortConfig) {
        // 拖拽结束触发
      },
    });
  });
</script>

<style lang="scss" scoped>
  .active {
    :deep(.ant-card) {
      overflow: hidden;
      border: 1px solid var(--primary) !important;
    }
  }
</style>
